<template>
  <div class="home">
    <homeHeader></homeHeader>
    <homeSwiper :swiperList="swiperList"></homeSwiper>
    <homeIcon :iconList="iconList"></homeIcon>
    <homeRecommend :recommendList="recommendList"></homeRecommend>
    <homeWeekend :weekendList="weekendList"></homeWeekend>
  </div>
</template>

<script>
import homeHeader from './components/header.vue'
import homeSwiper from './components/swiper.vue'
import homeIcon from './components/icon.vue'
import homeWeekend from './components/weekend.vue'
import homeRecommend from './components/recommend.vue'
import axios from 'axios'
export default {
  name: 'HomePage',
  components: { homeHeader, homeSwiper, homeIcon, homeRecommend, homeWeekend },
  data () {
    return {
      hotCities: '',
      swiperList: [],
      recommendList: [],
      iconList: [],
      weekendList: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/mock/city.json').then((response) => {
        const data = response.data.data
        this.hotCities = data.hotCities[0].name
      })
    },
    getSwiperInfo () {
      axios.get('/mock/index.json').then(
        (response) => {
          console.log(response)
          const data = response.data.data
          console.log(data)
          this.swiperList = data.swiperList
          this.recommendList = data.recommendList
          this.iconList = data.iconList
          this.weekendList = data.weekendList
        }
      )
    }

  },
  mounted () {
    debugger
    this.getHomeInfo()
    this.getSwiperInfo()
  }
}
</script>

<style lang='scss'>
</style>
